<template>
	<view>
		<!-- 刘海、雨滴屏留空 -->
		<view class="system-bar bg-white"></view>

		<!-- 顶部搜索栏 SSSSSS -->
		<view class="cu-bar bg-white search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入商品名称"
				 confirm-type="search"></input>
				<text class="cuIcon-camera" style="font-size: 150%;"></text>
			</view>
		</view>
		<!-- 顶部搜索栏 EEEEEE -->

		<view>
			<view class="flex">
				<!-- 滚动条左边部分 SSSSSS -->
				<scroll-view scroll-with-animation scroll-y style="height: calc(100vh - 200upx); width: 200upx;">
					<view class="type-item" :class="leftScrollSelected==item?'bg-white text-bold':''" :style="{fontSize:leftScrollSelected==item?'120%':'100%'}"
					 @tap="topLeftScroll(item)" v-for="(item,index) in 20" :key="index">
						<view v-if="leftScrollSelected==item" class="shuxian"></view>item-{{item}}
					</view>
				</scroll-view>
				<!-- 滚动条左边部分 EEEEEE -->
				<!-- 滚动条右边部分 SSSSSS -->
				<scroll-view scroll-with-animation :scroll-into-view="'right-'+leftScrollSelected" scroll-y style="height: calc(100vh - 200upx ); width: 550upx;"
				 class="bg-white">
					<view :id="'right-'+item.id" v-for="(item, index) in rightDataList" :key='index'>
						<view class="left-parent-font flex justify-between">
							<view class="text-bold">
								{{item.name}}
							</view>
							<view class="text-gray">
								更多<text class="cuIcon-right"></text>
							</view>
						</view>
						<view class="flex flex-wrap" style="margin-bottom: 20upx;">
							<view class="flex justify-center align-center" v-for="(child, i) in item.children" :key='i'>
								<view>
									<image :src="child.pic_url" style="width: 180upx; height: 180upx;"></image>
									<view class="text-center">
										<text class="text-red">￥</text>
										<text>{{child.name}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 滚动条右边部分 EEEEEE -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 左边滚动项目，默认选中第 1 个
				leftScrollSelected: 1,
				// 右边滚动项目数据
				rightDataList: []
			}
		},
		created() {
			this.buildRightDataList()
		},
		methods: {
			// 左侧被选中时, 切换选择项
			topLeftScroll: function(item) {
				this.leftScrollSelected = item
			},
			// 右侧数据构建
			buildRightDataList() {
				var dataList = [];
				for (var i = 1; i <= 20; i++) {
					var children = [];
					for (var j = 0; j < 5; j++) {
						children.push({
							name: '子类' + j,
							pic_url: '../../static/goods/belt.jpg'
						})
					}
					dataList.push({
						id: i,
						name: '父类' + i,
						children: children
					})
				}
				this.rightDataList = dataList;
				console.log('dataList: ' + JSON.stringify(dataList))
			}
		}
	}
</script>

<style>
	.system-bar {
		height: var(--status-bar-height);
	}

	.type-item {
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		position: relative;
	}

	.shuxian {
		position: absolute;
		width: 12upx;
		height: 30upx;
		background-color: #F43F3B;
		top: 35upx;
		left: 10upx;
	}

	.left-parent-font {
		margin-top: 40upx;
		margin-left: 20upx;
		margin-right: 20upx;
	}
</style>
